<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>烟草订购助手</title>
    <link rel="stylesheet" href="../styles/popup.css">
    <style>
        html,
        body,
        .container {
            width: 400px !important;
            min-width: 400px !important;
            max-width: 400px !important;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="header">
            <img src="../icons/icon48.svg" alt="插件图标" class="logo">
            <h1>烟草订购助手</h1>
        </div>

        <div class="content">
            <!-- 客户信息展示区域 -->
            <div class="info-section">
                <h3>客户信息</h3>
                <div class="customer-info">
                    <div class="info-item">
                        <span class="info-label">客户编码:</span>
                        <span id="customerCode" class="info-value">未获取</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">页面状态:</span>
                        <span id="pageStatus" class="info-value status-unknown">检测中...</span>
                    </div>
                </div>
            </div>

            <!-- 操作状态提示区域 -->
            <div class="status-section">
                <div id="statusMessage" class="status-message hidden">
                    <span class="status-icon">ℹ️</span>
                    <span class="status-text">准备就绪</span>
                </div>
            </div>

            <!-- 快捷功能区域 -->
            <div class="feature-section">
                <h3>快捷功能</h3>
                <div class="button-group">
                    <button id="fetchDataBtn" class="action-btn">
                        <span class="btn-icon">📊</span>
                        获取数据
                    </button>
                    <button id="autoFillBtn" class="action-btn">
                        <span class="btn-icon">📝</span>
                        自动填写
                    </button>
                    <button id="createPurchaseOrderBtn" class="action-btn primary">
                        <span class="btn-icon">🛒</span>
                        新建采购单
                    </button>

                </div>
            </div>

            <!-- 订烟数据展示区域 -->
            <div class="data-section">
                <h3>订烟数据</h3>
                <div id="smokingDataContainer" class="data-container">
                    <div class="data-placeholder">
                        <span class="placeholder-icon">📊</span>
                        <p>暂无订烟数据</p>
                    </div>
                </div>
            </div>

            <!-- 操作历史区域 -->
            <div class="history-section">
                <h3>操作历史</h3>
                <div id="operationHistory" class="history-container">
                    <div class="history-placeholder">
                        <span class="placeholder-icon">📝</span>
                        <p>暂无操作记录</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="footer">
            <span class="version">v1.0.0</span>
        </div>
    </div>

    <script src="../src/popup.js"></script>
</body>

</html>